<template>
  <div id="swipercom">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
          <img :src="item.pic" alt="" />
         
        </div>
        <!-- 常见的小圆点 -->
        <div class="swiper-pagination"></div>
      </div>
      <!-- 换页器 -->
      <div class="swiper-pagination"></div>
      <!-- 前进后退 -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <!-- 滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
  </div>
</template>
 
<script>
import Swiper from "swiper"; //引入swiper
import "swiper/css/swiper.css";
//引入swiper样式
export default {
  data() {
    return {
      imgs: [
        { pic: require("@/assets/images/banner.jpg") },
        { pic: require("@/assets/images/bannerV2.jpg") },
        // { pic: require("@/assets/images/banner1.jpg") },
        { pic: require("@/assets/images/bg.jpg") },
      ],
      imgIndex: 1,
      swiperOption: {
        //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,
        //循环,而不是每次都突然回到第一个
        loop: true,
        //设定初始化时slide的索引，加载页面时显示的第几个，从0开始
        initialSlide: 0,
        //自动播放
        autoplay: {
          /*切换轮播图片的时间，即上次切换成功后到再次需要切换的时间*/
          delay: 1500,
          stopOnLastSlide: false,
          /* 触摸滑动后是否继续轮播 false触摸后不再点击继续轮播，true触摸后不再点击不轮播，停在最后一次页面*/
          disableOnInteraction: false,
        },
        //滑动速度，时间单位，越小越快，与上面 delay 区别，speed是完成切换所需时间，delay是切换成功后停留多长时间再切换
        speed: 800,
        //滑动方向
        direction: "horizontal",
        //小手掌抓取滑动
        grabCursor: true,
        on: {
          //滑动之后回调函数
          slideChangeTransitionStart: function () {
            /* realIndex为滚动到当前的slide索引值 */
            that.imgIndex = this.realIndex - 1;
          },
        },
        //分页器设置
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
      },
      banner: [],
    };
  },
  mounted() {
    // this.get_data(),
    new Swiper(".swiper-container", {
      // direction: 'vertical', // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      autoplay: {
        delay: 3000, //自动播放
      },

      // 如果需要滚动条
      // scrollbar: {
      // el: '.swiper-scrollbar',
      // },
    });
  },
};
</script>
 
<style lang="scss" scoped>

.swiper-container {
  // width: 1226px;
  height: 520px;
  margin: 0 auto;
  /* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
  img {
    vertical-align: middle;
    height: 100%;
    width: 100%;
    transition: 0.3s;
  }
  .swiper-slide {
    text-align: center;
    overflow: hidden;
  }
  //swiper 指示点样式
}
::v-deep .swiper-pagination-bullet {
  width: 30px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}

//修改上下页左右箭头的样式
::v-deep .swiper-button-prev:after,
::v-deep .swiper-button-next:after {
  // opacity: 1;
  object-fit: contain;
  color: #666;
  // font-size: .08rem;
  transition: all 0.2s ease-in-out;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
//左右上下页的样式
//   ::v-deep .swiper-button-prev, ::v-deep .swiper-button-next{
//     width:60px;
//     height:60px;
//     background-color: hsla(0,0%,100%,.3);
//     border-radius: 50%;
//     transition: all .2s ease-in-out;
//     &:hover{
//       background-color: hsla(0,0%,100%,.5);
//       transition: all .2s ease-in-out;
//     }
// }
</style>